<template>
  <div class="appContainer">
    <!-- <el-steps :active="stepActive" finish-status="success" align-center>
      <el-step title="账户信息" description=""></el-step>
      <el-step title="企业信息" description=""></el-step>
    </el-steps> -->
    <div v-if="stepActive == 0" class="InfoOptLump">
      <div class="infoOptBox" @click="infoOpt('1')">
        <span class="infoOptBoxText">我是个人</span>
      </div>
      <div class="infoOptBox" @click="infoOpt('0')">
        <span class="infoOptBoxText">我是企业</span>
      </div>
    </div>
    <div v-if="stepActive == 1" class="accountInfoLump">
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form :inline="true" :model="userFromInline" ref="userFromInline" label-width="80px" class="demo-ruleForm" hide-required-asterisk>
            <el-form-item prop="F_PKTL_User" :rules="userNameRules">
              <span slot="label" class="formLabel">用户名:</span>
              <el-input
                v-model="userFromInline.F_PKTL_User"
                class="formLabelInput"
                placeholder="用户名"
                readonly
                onfocus="this.removeAttribute('readonly');"
                onblur="this.setAttribute('readonly',true);"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_PassWord" :rules="userPasswordRules">
              <span slot="label" class="formLabel">密码:</span>
              <el-input v-model="userFromInline.F_PKTL_PassWord" type="password" class="formLabelInput" show-password placeholder="密码" autocomplete="new-password"></el-input>
            </el-form-item>
            <el-form-item prop="userPasswordCheck" :rules="userPasswordTrueRules">
              <span slot="label" class="formLabel">确认密码:</span>
              <el-input v-model="userFromInline.userPasswordCheck" type="password" class="formLabelInput" show-password placeholder="确认密码"></el-input>
            </el-form-item>
            <br />
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-button class="subButton" @click="next('userFromInline')">下一步</el-button>
          <el-button class="subButton" @click="prev()">上一步</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 个人 -->
    <div v-if="stepActive == 2 && firmFormInline.F_PKTL_UserType == '1'" class="companyInfoLump">
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form :inline="true" :model="firmFormInline" ref="firmFormInline" label-width="110px" class="demo-form-inline">
            <el-divider content-position="left">基本信息</el-divider>
            <el-form-item prop="F_PKTL_CardID" :rules="cardIDRules">
              <span slot="label" class="formLabel">身份证号码:</span>
              <el-input v-model="firmFormInline.F_PKTL_CardID" class="formLabelInput" placeholder="身份证号码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_ContactAddress" :rules="addressRules">
              <span slot="label" class="formLabel">联系地址:</span>
              <el-input
                v-model="firmFormInline.F_PKTL_ContactAddress"
                class="formLabelInput"
                placeholder="联系地址"
                readonly
                onfocus="this.removeAttribute('readonly');"
                onblur="this.setAttribute('readonly',true);"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-divider content-position="left">联系方式</el-divider>
            <el-form-item prop="F_PKTL_CurrentUserName" :rules="userNameRules">
              <span slot="label" class="formLabel">联系人姓名:</span>
              <el-input v-model="firmFormInline.F_PKTL_CurrentUserName" class="formLabelInput" placeholder="联系人姓名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_CurrentUserPhone" :rules="PhoneNumberRules">
              <span slot="label" class="formLabel">手机号:</span>
              <el-input v-model="firmFormInline.F_PKTL_CurrentUserPhone" class="formLabelInput" placeholder="手机号" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_CurrentUserMail" :rules="mailRules">
              <span slot="label" class="formLabel">邮箱:</span>
              <el-input v-model="firmFormInline.F_PKTL_CurrentUserMail" class="formLabelInput" placeholder="邮箱" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label-width="formLabelWidth">
              <el-upload class="upload-class" ref="fileUpload" action="#" name="身份证复印件" :file-list="fileList" :http-request="fileUpload" :on-remove="handleRemove">
                <el-button size="small" type="primary">身份证复印件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-button class="subButton" type="primary" @click="submit('firmFormInline')">注册</el-button>
          <el-button class="subButton" @click="prevReset('1')">上一步</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 企业 -->
    <div v-if="stepActive == 2 && firmFormInline.F_PKTL_UserType == '0'" class="companyInfoLump">
      <el-row>
        <el-col :span="20" :offset="2">
          <el-form :inline="true" :model="firmFormInline" ref="firmFormInline" label-width="110px" class="demo-form-inline">
            <el-divider content-position="left">基本信息</el-divider>
            <el-form-item prop="F_PKTL_CustomerName" :rules="companyNameRules">
              <span slot="label" class="formLabel">公司全称:</span>
              <el-input v-model="firmFormInline.F_PKTL_CustomerName" class="formLabelInput" placeholder="公司全称" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <span slot="label" class="formLabel">公司简称:</span>
              <el-input v-model="firmFormInline.F_PKTL_CustomerShortName" class="formLabelInput" placeholder="公司简称" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item required>
              <span slot="label" class="formLabel">企业性质:</span>
              <el-select v-model="firmFormInline.F_PKTL_FirmNature" class="formLabelSelect" placeholder="企业性质">
                <el-option v-for="item in firmNatureSelect" :label="item.Caption" :key="item.Value" :value="item.Value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item required>
              <span slot="label" class="formLabel">企业类型:</span>
              <el-select v-model="firmFormInline.F_PKTL_FirmType" class="formLabelSelect" placeholder="企业类型">
                <el-option v-for="item in firmTypeSelect" :label="item.Caption" :key="item.Value" :value="item.Value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="F_PKTL_RegisteredCapital" :rules="moneyRules">
              <span slot="label" class="formLabel">注册资金:</span>
              <el-input v-model="firmFormInline.F_PKTL_RegisteredCapital" class="formLabelInput" placeholder="注册资金（万元）" autocomplete="off">
                <template slot="append">万元</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_FoundYear" :rules="yearRules">
              <span slot="label" class="formLabel">成立年份:</span>
              <el-input v-model="firmFormInline.F_PKTL_FoundYear" class="formLabelInput" placeholder="成立年份（年）" autocomplete="off">
                <template slot="append">年</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_CorporationName" :rules="userNameRules">
              <span slot="label" class="formLabel">法定代表人:</span>
              <el-input v-model="firmFormInline.F_PKTL_CorporationName" class="formLabelInput" placeholder="法定代表人" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_CorporationPhone" :rules="PhoneNumberRules" required>
              <span slot="label" class="formLabel">法人联系方式:</span>
              <el-input v-model="firmFormInline.F_PKTL_CorporationPhone" class="formLabelInput" placeholder="法人联系方式" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_BankCard" :rules="bankAccountRules">
              <span slot="label" class="formLabel">银行账号:</span>
              <el-input v-model="firmFormInline.F_PKTL_BankCard" class="formLabelInput" placeholder="银行账号" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_DepositBank" :rules="depositBankRules">
              <span slot="label" class="formLabel">开户行:</span>
              <el-input v-model="firmFormInline.F_PKTL_DepositBank" class="formLabelInput" placeholder="开户行" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_FirmMail" :rules="mailRules">
              <span slot="label" class="formLabel">企业邮箱:</span>
              <el-input v-model="firmFormInline.F_PKTL_FirmMail" class="formLabelInput" placeholder="企业邮箱" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_TaxNumber" :rules="taxNumberRules">
              <span slot="label" class="formLabel">税号:</span>
              <el-input v-model="firmFormInline.F_PKTL_TaxNumber" class="formLabelInput" placeholder="税号" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item>
          <span slot="label" class="formLabel">所属行业:</span>
          <el-input v-model="firmFormInline.belongTrade"  class="formLabelInput"  placeholder="所属行业"></el-input>
        </el-form-item> -->
            <el-form-item prop="F_PKTL_FirmAddress" :rules="addressRules">
              <span slot="label" class="formLabel">公司办公地址:</span>
              <el-input v-model="firmFormInline.F_PKTL_FirmAddress" class="formLabelInput2" placeholder="xxx省xxx市xxx县+详细地址" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_FactoryAddress" :rules="addressRules">
              <span slot="label" class="formLabel">生产工厂地址:</span>
              <el-input
                v-model="firmFormInline.F_PKTL_FactoryAddress"
                class="formLabelInput2"
                placeholder="xxx省xxx市xxx县+详细地址"
                readonly
                onfocus="this.removeAttribute('readonly');"
                onblur="this.setAttribute('readonly',true);"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <span slot="label" class="formLabel">经营范围:</span>
              <el-input type="textarea" v-model="firmFormInline.F_PKTL_ManageScope" class="formLabelInput2" placeholder="列举（xx行业）" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <span slot="label" class="formLabel">其他:</span>
              <el-input type="textarea" v-model="firmFormInline.F_PKTL_FirmOtherDetail" class="formLabelInput2" placeholder="企业说明" autocomplete="off"></el-input>
            </el-form-item>
            <el-divider content-position="left">联系方式</el-divider>
            <el-form-item prop="F_PKTL_CurrentUserName" :rules="userNameRules">
              <span slot="label" class="formLabel">联系人姓名:</span>
              <el-input v-model="firmFormInline.F_PKTL_CurrentUserName" class="formLabelInput" placeholder="联系人姓名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_CurrentUserPhone" :rules="PhoneNumberRules">
              <span slot="label" class="formLabel">手机号:</span>
              <el-input v-model="firmFormInline.F_PKTL_CurrentUserPhone" class="formLabelInput" placeholder="手机号" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="F_PKTL_CurrentUserMail" :rules="mailRules">
              <span slot="label" class="formLabel">邮箱:</span>
              <el-input v-model="firmFormInline.F_PKTL_CurrentUserMail" class="formLabelInput" placeholder="邮箱" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label-width="formLabelWidth">
              <el-upload class="upload-class" ref="fileUpload" action="#" name="企业资质附件" :file-list="fileList" :http-request="fileUpload" :on-remove="handleRemove">
                <el-button size="small" type="primary">企业资质附件</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-button class="subButton" type="primary" @click="submit('firmFormInline')">注册</el-button>
          <el-button class="subButton" @click="prevReset('0')">上一步</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
 
 
<script>
import * as validateRules from '@/common/utils/validateRules.js'
import axios from "axios";
import global from "@/utils/Global.js"

export default {
  data() {
    // 密码框验证规则
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        callback(new Error('密码不能低于六位字符'))
      } else {
        callback()
      }
    }
    // 确认密码框验证规则
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userFromInline.F_PKTL_PassWord) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      //步骤条初始化
      stepActive: 0,
      // 企业性质下拉框属性
      firmNatureSelect: [],
      // 企业类型下拉框属性
      firmTypeSelect: [],
      // 账户信息
      userFromInline: {
        // 用户名
        F_PKTL_User: '',
        // 密码
        F_PKTL_PassWord: '',
        // 确认密码
        userPasswordCheck: '',
      },
      // 基础信息
      firmFormInline: {
        // 编码
        FNumber: '',
        // 名称
        FName: '',
        // 用户名
        F_PKTL_User: '',
        // 密码
        F_PKTL_PassWord: '',
        // 用户类型
        F_PKTL_UserType: '',
        // 身份证号码
        F_PKTL_CardID: '',
        // 联系地址
        F_PKTL_ContactAddress: '',
        // 公司全称
        F_PKTL_CustomerName: '',
        // 公司简称
        F_PKTL_CustomerShortName: '',
        // 企业性质
        F_PKTL_FirmNature: '',
        // 企业类型
        F_PKTL_FirmType: '',
        // 注册资金
        F_PKTL_RegisteredCapital: '',
        // 成立年份
        F_PKTL_FoundYear: '',
        // 法人代表人
        F_PKTL_CorporationName: '',
        // 法人联系方式
        F_PKTL_CorporationPhone: '',
        // 银行卡号
        F_PKTL_BankCard: '',
        // 开户行
        F_PKTL_DepositBank: '',
        // 企业邮箱
        F_PKTL_FirmMail: '',
        // 税号
        F_PKTL_TaxNumber: '',
        // 公司办公地址
        F_PKTL_FirmAddress: '',
        // 工厂地址
        F_PKTL_FactoryAddress: '',
        // 经营范围
        F_PKTL_ManageScope: '',
        // 其他说明
        F_PKTL_FirmOtherDetail: '',
        // 当前联系人姓名
        F_PKTL_CurrentUserName: '',
        // 当前联系人联系方式
        F_PKTL_CurrentUserPhone: '',
        // 当前联系人邮箱
        F_PKTL_CurrentUserMail: '',
      },
      //   校验规则
      //   密码框
      userPasswordRules: [{ validator: validatePass, trigger: 'blur' }],
      //   密码确认框
      userPasswordTrueRules: [{ validator: validatePass2, trigger: 'blur' }],
      //   金额验证
      moneyRules: [
        { required: true, message: '内容不能为空', trigger: 'blur' },
        { required: true, validator: validateRules.moneyReg, trigger: 'blur' },
      ],
      //   企业名称规则
      companyNameRules: [
        { required: true, message: '内容不能为空', trigger: 'blur' },
        { min: 3, message: '不能低于三个字符', trigger: 'blur' },
      ],
      // 用户名规则
      userNameRules: [
        { required: true, message: '内容不能为空', trigger: 'blur' },
        { min: 2, message: '不能低于两个字符', trigger: 'blur' },
      ],
      // 年限规则验证
      yearRules: [
        { required: true, message: '内容不能为空', trigger: 'blur' },
        { validator: validateRules.yearValid, trigger: 'blur' },
      ],
      // 手机号验证
      PhoneNumberRules: [{ required: true, validator: validateRules.validatePhoneNumber, trigger: 'blur' }],
      // 开户行规则
      depositBankRules: [
        { required: true, message: '开户行不能为空', trigger: 'blur' },
        { min: 6, message: '不能低于六个字符', trigger: 'blur' },
      ],
      // 地址填写规则
      addressRules: [
        { required: true, message: '地址不能为空', trigger: 'blur' },
        { min: 8, message: '不能低于八个字符', trigger: 'blur' },
      ],
      // 银行卡号验证
      bankAccountRules: [{ required: true, validator: validateRules.bankAccountValid, trigger: 'blur' }],
      // 邮箱验证
      mailRules: [{ required: true, validator: validateRules.validateEmail, trigger: 'blur' }],
      // 税号
      taxNumberRules: [{ required: true, validator: validateRules.validateCreditCode, trigger: 'blur' }],
      // 身份证号码验证
      cardIDRules: [{ required: true, validator: validateRules.validateCardID, trigger: 'blur' }],

      fileList:[]
    }
  },
  created() {
    // 获取表单的元数据
    this.loadBusinessInfo()
  },
  methods: {
    fileUpload(item) {
      let userToken=sessionStorage.getItem('userToken')
      const reader = new FileReader()
      reader.readAsArrayBuffer(item.file)
      reader.onload=()=>{
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
        });
        axios({
          url:global.uploadUrl+"?filename="+item.file.name+"&fileid="+"&last=true&dbid="+item.file.uid+"&filelen="+item.file.size+"&token="+userToken,
          method:'post',
          data:reader.result,
          timeout:10000
        }).then((res)=>{
          console.log(res)
          loading.close()
          var file={
            name:res.data.Upload2AttachmentResult.FileName,
            fileId:res.data.Upload2AttachmentResult.FileId,
            fileSize:item.file.size
          }
          this.fileList.push(file);
        }).catch(err=>{
          alert("文件过大，上传超时")
          console.log(err.code)
          loading.close()
          this.handleRemove(item.file,this.fileList)

        })
      }
    },

    handleRemove(file,fileList){
      alert(file)
      this.fileList=fileList.filter(item => item!=file) 
    },

  
    // 金蝶元数据获取方法
    loadBusinessInfo() {
      this.$api.billBusinessInfo.queryBusinessInfo('PKTL_BidCustomer').then((res) => {
        console.log('用户表单的元数据', res)
        if (res.Result.NeedReturnData != null) {
          res.Result.NeedReturnData.Entrys[0].Fields.forEach((element) => {
            // 判断元数据的key名字是否符合条件，将数组对象重新赋值
            if (element.Key == 'F_PKTL_FirmNature') {
              this.firmNatureSelect = element.Extends
            }
            if (element.Key == 'F_PKTL_FirmType') {
              this.firmTypeSelect = element.Extends
            }
          })
        }
      })
    },
    // 选择用户是个人和企业的方法
    infoOpt(num) {
      if (num == '0') {
        console.log('企业')
      } else if (num == '1') {
        console.log('个人')
      }
      this.firmFormInline.F_PKTL_UserType = num
      if (this.stepActive++ > 1) this.stepActive = 0
    },
    //下一页
    next(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.stepActive++ > 1) this.stepActive = 0
          // 将注册的编码和名称赋值为用户名称
          this.firmFormInline.FNumber = this.userFromInline.F_PKTL_User
          this.firmFormInline.FName = this.userFromInline.F_PKTL_User
          this.firmFormInline.F_PKTL_User = this.userFromInline.F_PKTL_User
          this.firmFormInline.F_PKTL_PassWord = this.userFromInline.F_PKTL_PassWord
          console.log(this.firmFormInline)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //需要重置内容的上一页
    prevReset(num) {
      this.firmFormInline = this.$options.data().firmFormInline
      this.firmFormInline.F_PKTL_UserType = num
      if (this.stepActive > 0) this.stepActive--
    },
    // 上一页
    prev() {
      if (this.stepActive > 0) this.stepActive--
    },
    // 注册用户
    submit(formName) {
      // 判断必要属性是否添加完成
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 提交表单，请求金蝶接口
          // 初始化发送参数
          const data = { formid: {}, data: { Model: {} } }
          data.formid = 'PKTL_BidCustomer'
          data.data.Model = this.firmFormInline
          console.log(this.firmFormInline, '注册请求的参数')
          if(this.fileList.length>0){
            this.$api.users.enrollCustomer(data).then((res) => {
              console.log(res, '注册请求的返回内容')
              console.log(this.fileList)

              // 判断返回的内容是否是undefined
              if (res != undefined) {
                if (res.Result.ResponseStatus.IsSuccess) {
                  let modelData=[];
                  this.fileList.forEach(item=>{
                    modelData.push({
                            FBillType: "PKTL_BidCustomer",
                            FInterId:res.Result.Id,
                            FaliasFileName:item.filename,
                            FFileId:item.fileId,
                            FAttachmentName:item.name,
                            FAttachmentSize:item.fileSize,
                            FBillNo:res.Result.Number,
                            FEntryInterId:'-1',
                            FEntryKey:' '
                        })
                  })
                  let params={
                    FormId:"BOS_Attachment",
                    data:{
                        NeedUpDateFields:[],
                        BatchCount:2,
                        Model: modelData
                    }}

                  //批量存储附件信息
                  this.$api.file.batchSave(params).then((res)=>{
                    // 注册成功
                    console.log(res.Result.ResponseStatus.IsSuccess, '注册的结果')
                    this.$alert('', '注册成功！前往首页', {
                      dangerouslyUseHTMLString: true,
                      center: true,
                      callback: (action) => {
                        // 前往首页
                        this.$router.push({ name: 'main' })
                      },
                    })
                  })

                } else {
                  // this.$alert(res.Result.ResponseStatus.Errors[0].Message, "注册失败", {
                  //   dangerouslyUseHTMLString: true,
                  //   callback:action=>{
                  //     // 前往首页

                  //   }
                  // })
                  // 注册失败
                  console.log('注册失败', res.Result.ResponseStatus.Errors)
                }
              } else {
                console('注册的请求接口出错，返回的内容是undefined')
              }
            })
          }
          else{
            alert("附件不能为空")
          }
          
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
<style scoped>
/* 按钮的样式 */
.subButton {
  margin-top: 0px;
  margin-left: 20px;
  margin-bottom: 160px;
  float: right;
}
/* 企业和个人块样式 */
.accountInfoLump {
  text-align: left;
}
/* 表单 */
.demo-ruleForm {
  padding: 20px;
}
/* 步骤条 */
.appContainer {
  color: brown;
}
/* 进行中状态：圈线 */
.appContainer >>> .el-step__head.is-process {
  color: #409eff;
  border-color: #409eff;
}
/* 进行中状态：title（文字） */
.appContainer >>> .el-step__title.is-process {
  color: #409eff;
}

/* 分割线样式 */
.el-divider {
  height: 30px;
  margin: 10px 0px;
  background-color: #409eff;
}
.el-divider__text {
  color: rgb(255, 255, 255);
  top: 14px;
  left: 0px;
  background: none;
  font-weight: bold;
}
/* 企业信息的输入框个性设计 */
.formLabelInput {
  width: 440px;
}
.formLabelSelect {
  width: 440px;
}
.formLabelInput2 {
  width: 1000px;
}
.upload-class {
  width: 1000px;

}
/* 个人信息选择个人和企业的样式 */
.InfoOptLump {
  /* border: 1px solid rgb(46, 46, 46); */
  height: 600px;
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
/* div样式 */
.infoOptBox {
  box-shadow: 0 0px 10px rgb(190, 190, 190);
  width: 400px;
  height: 200px;
  margin: 20px;
  text-align: center;
  border-radius: 15px;
  /* padding: 20px; */
}
/* 类型选择器的文字样式 */
.infoOptBoxText {
  color: #409eff;
  font-weight: 900;
  font-size: 25px;
  line-height: 200px;
}
/* 鼠标悬浮样式 */
.infoOptBox:hover {
  box-shadow: 0 0px 20px rgb(29, 172, 255);
}
</style>